<template>
  <div class="wheat-analysis">
    <div class="analysis-header">
      <h3>数据分析</h3>
      <div class="analysis-controls">
        <el-select v-model="analysisType" placeholder="分析类型" style="width: 150px;">
          <el-option label="品质趋势分析" value="trend" />
          <el-option label="地区对比分析" value="region" />
          <el-option label="品种对比分析" value="variety" />
          <el-option label="时间序列分析" value="time" />
        </el-select>
        
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px; margin-left: 12px;"
        />
        
        <el-button type="primary" @click="generateAnalysis">
          <el-icon><TrendCharts /></el-icon>
          生成分析
        </el-button>
      </div>
    </div>
    
    <div class="analysis-content">
      <div class="chart-container">
        <div class="chart-placeholder">
          <el-icon><TrendCharts /></el-icon>
          <h4>数据分析图表</h4>
          <p>选择分析类型和日期范围，点击"生成分析"按钮查看详细图表</p>
          <small>数据可视化功能开发中...</small>
        </div>
      </div>
      
      <div class="analysis-summary">
        <div class="summary-card">
          <div class="summary-header">
            <h4>分析摘要</h4>
            <el-tag type="primary">实时</el-tag>
          </div>
          <div class="summary-content">
            <div class="summary-item">
              <span class="label">样本总数：</span>
              <span class="value">{{ summary.totalSamples }}</span>
            </div>
            <div class="summary-item">
              <span class="label">优质率：</span>
              <span class="value">{{ summary.excellentRate }}%</span>
            </div>
            <div class="summary-item">
              <span class="label">平均蛋白质：</span>
              <span class="value">{{ summary.avgProtein }}%</span>
            </div>
            <div class="summary-item">
              <span class="label">平均水分：</span>
              <span class="value">{{ summary.avgMoisture }}%</span>
            </div>
          </div>
        </div>
        
        <div class="insights-card">
          <div class="insights-header">
            <h4>分析洞察</h4>
          </div>
          <div class="insights-content">
            <div class="insight-item" v-for="insight in insights" :key="insight.id">
              <div class="insight-icon" :class="insight.type">
                <el-icon><component :is="insight.icon" /></el-icon>
              </div>
              <div class="insight-text">
                <div class="insight-title">{{ insight.title }}</div>
                <div class="insight-desc">{{ insight.description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'WheatAnalysis',
  setup() {
    const analysisType = ref('trend')
    const dateRange = ref([])
    
    const summary = reactive({
      totalSamples: 3420,
      excellentRate: 92.5,
      avgProtein: 12.1,
      avgMoisture: 13.8
    })
    
    const insights = ref([
      {
        id: 1,
        type: 'trend',
        icon: 'TrendCharts',
        title: '品质趋势上升',
        description: '近3个月小麦品质整体呈上升趋势，优质率提升3.2%'
      },
      {
        id: 2,
        type: 'region',
        icon: 'Location',
        title: '地区差异明显',
        description: '河南省小麦品质普遍优于其他地区，平均蛋白质含量高0.8%'
      },
      {
        id: 3,
        type: 'variety',
        icon: 'Wheat',
        title: '品种影响显著',
        description: '郑麦366品种在各项指标上表现最佳，建议推广种植'
      },
      {
        id: 4,
        type: 'time',
        icon: 'Clock',
        title: '收获时间影响',
        description: '6月中旬收获的小麦品质最佳，建议优化收获时间'
      }
    ])
    
    const generateAnalysis = () => {
      ElMessage.success('分析报告生成中...')
      // 这里可以调用后端API生成分析报告
    }
    
    return {
      analysisType,
      dateRange,
      summary,
      insights,
      generateAnalysis
    }
  }
}
</script>

<style scoped>
.wheat-analysis {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.analysis-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.analysis-controls {
  display: flex;
  align-items: center;
}

.analysis-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.chart-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-placeholder {
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  border: 2px dashed #e8e8e8;
  border-radius: 8px;
}

.chart-placeholder .el-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #ccc;
}

.chart-placeholder h4 {
  margin: 8px 0 4px 0;
  font-size: 18px;
  color: #666;
}

.chart-placeholder p {
  margin: 8px 0 4px 0;
  font-size: 14px;
  text-align: center;
  max-width: 300px;
}

.chart-placeholder small {
  font-size: 12px;
  color: #ccc;
}

.analysis-summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.summary-card, .insights-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-header, .insights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.summary-header h4, .insights-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item .label {
  color: #666;
  font-size: 14px;
}

.summary-item .value {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.insights-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  background: #f8f9fa;
  transition: background 0.2s;
}

.insight-item:hover {
  background: #e9ecef;
}

.insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}

.insight-icon.trend {
  background: #1890ff;
}

.insight-icon.region {
  background: #52c41a;
}

.insight-icon.variety {
  background: #722ed1;
}

.insight-icon.time {
  background: #fa8c16;
}

.insight-text {
  flex: 1;
}

.insight-title {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 4px;
}

.insight-desc {
  color: #666;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .analysis-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .analysis-controls {
    flex-direction: column;
    gap: 12px;
  }
  
  .analysis-content {
    grid-template-columns: 1fr;
  }
  
  .chart-placeholder {
    height: 300px;
  }
}
</style>
